.react-select__container {
	flex-grow: 1;
	.react-select__menu {
		background-color: var(--bs-body-bg);
		border: var(--bs-border-width) solid var(--bs-border-color-translucent);
	}
}

.react-select__control {
	&.react-select__control {
		background-color: transparent;
		line-height: var(--bs-select-line-height);
		border: var(--bs-border-width) solid var(--bs-border-color);
		transition:
			border-color 0.15s ease-in-out,
			box-shadow 0.15s ease-in-out;
		&--is-disabled {
			background-color: var(--bs-secondary-bg);
		}
		&--is-focused {
			box-shadow: none;
		}
		&:hover {
			border: var(--bs-border-width) solid var(--bs-border-color);
		}
	}
}

.react-select__value-container {
	.react-select__single-value,
	.react-select__input-container {
		color: inherit;
	}
	.react-select__multi-value {
		background-color: var(--bs-secondary-bg);
		.react-select__multi-value__label {
			color: inherit;
		}
	}
}

.react-select__option {
	&.react-select__option {
		&--is-focused {
			background-color: var(--bs-tertiary-bg);
		}
		&--is-selected,
		&:active {
			background-color: var(--bs-primary);
			color: white;
		}
	}
}

[data-bs-theme="dark"] {
	.react-select__indicators .react-select__indicator {
		color: inherit;
		&:hover {
			color: rgba(255, 255, 255, 0.75);
		}
	}
}
